<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        /* 第一题 */
        .box1 {
            width: 200px;
            height: 200px;
            border: 1px solid #000;
            display: flex;
        }

        .box1>div:nth-child(1) {
            display: flex;
            flex-flow: column;
            flex: 1;
            border: 1px solid red;
        }

        .box1>div:nth-child(1)>div:nth-child(1) {
            flex: 1;
            background-color: aqua;
        }

        .box1>div:nth-child(1)>div:nth-child(2) {
            flex: 1;
            background-color: blue;
        }

        .box1>div:nth-child(2) {
            background-color: brown;
            flex: 1;
        }

        /* 第二题 */
        .box2 {
            width: 300px;
            height: 500px;
            border: 1px solid #000;
            display: flex;
            flex-flow: column;
            text-align: center;
        }

        .box2>div:nth-child(1) {
            flex: 1;
            background-color: burlywood;
        }

        .box2>div:nth-child(2) {
            flex: 5;
            background-color: chartreuse;
            overflow: hidden;
            /* 设置滚动 */
            overflow-y: scroll;
        }

        .box2>div:nth-child(3) {
            flex: 1;
            background-color: cadetblue;
        }

        ::-webkit-scrollbar {
            display: none;
        }

        /* 第三题 */
        .box3 {
            width: 100vw;
            height: 100vh;
            border: 1px solid #000;
            box-sizing: border-box;
            display: flex;
            flex-flow: column;
        }

        .top,
        .center,
        .bottom {
            display: flex;
        }

        .top {
            border: 1px solid red;
        }

        .center {
            flex: 1;
            border: 1px solid blueviolet;
        }

        .bottom {
            border: 1px solid brown;
        }

        /* 第四道题 */
        .box4 {
            width: 200px;
            height: 200px;
            border-radius: 10px;
            background-color: chartreuse;
            display: flex;
            justify-content: space-between;
        }

        .box4 .a {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background-color: #000;
        }

        .box4 .a2 {
            align-self: center;
        }

        .box4 .a3 {
            align-self: end;
        }
    </style>
</head>

<body>
    <!-- 第一题 -->
    <div class="box1">
        <div>
            <div>1</div>
            <div>2</div>
        </div>
        <div>3</div>
    </div>

    <!-- 第二题flex实现手机端头尾固定，中间自适应 -->
    <div class="box2">
        <div>1</div>
        <div>
            <div>1234</div>
            <div>1234</div>
            <div>1234</div>
            <div>1234</div>
            <div>1234</div>
            <div>1234</div>
            <div>1234</div>
            <div>1234</div>
            <div>1234</div>
            <div>1234</div>
            <div>1234</div>
            <div>1234</div>
            <div>1234</div>
            <div>1234</div>
            <div>1234</div>
            <div>1234</div>
            <div>1234</div>
            <div>1234</div>
            <div>1234</div>
            <div>1234</div>
            <div>1234</div>
            <div>1234</div>
            <div>1234</div>
            <div>1234</div>
            <div>1234</div>
            <div>1234</div>
            <div>1234</div>
            <div>1234</div>
            <div>1234</div>
            <div>1234</div>
        </div>
    </div>

    <!-- 第三道题flex布局实现pc网站自适应效果 -->
    <div class="box3">
        <div class="top">
            <div style="width: 100px; height:100px;background:palevioletred">上左，宽高固定</div>
            <div style="flex: 1;background:peru">上右，高度固定，宽度自适应</div>
        </div>
        <div class="center">
            <div style="flex:2;background:pink">中1，中部区域全部为高度自适应</div>
            <div style="flex:3;background:aqua">中2，中部区域全部为高度自适应</div>
            <div style="flex:2;background:cornflowerblue">中3，中部区域全部为高度自适应</div>
        </div>
        <div class="bottom" style=" height:100px !important;background:seagreen">
            底部，高度固定，宽度自适应
        </div>
    </div>
    <!-- 第四道题 实现骰子布局-->
    <div class="box4">
        <div class="a a1"></div>
        <div class="a a2"></div>
        <div class="a a3"></div>
    </div>
</body>

</html>